<template>
    <div>
        <van-nav-bar title="欢迎注册" left-text="返回" left-arrow @click-left="onClickLeft" />
        <van-form @submit="onSubmit">
            <van-cell-group inset>
                <van-field v-model="username" name="username" label="用户名" placeholder="用户名"
                    :rules="[{ required: true, message: '请填写用户名' }]" />
                <van-field v-model="password" type="password" name="password" label="密码" placeholder="密码"
                    :rules="[{ required: true, message: '请填写密码' }]" />
            </van-cell-group>

            <van-field v-model="phone" name="phone" label="手机号" placeholder="手机号"
                :rules="[{ required: true, message: '请填写手机号' }]" />
            <van-field v-model="yzm" name="yzm" label="验证码" placeholder="验证码"
                :rules="[{ required: true, message: '请填写验证码' }]" />

            <div style="margin: 16px;">
                <van-button round block type="primary" @click="queryyzm()" class="queryyzm">
                    获取验证码
                </van-button>
            </div>

            <div style="margin: 16px;">
                <van-button round block type="primary" native-type="submit">
                    注册数据
                </van-button>
            </div>
        </van-form>
    </div>
</template>

<script setup>
import { showSuccessToast, showFailToast } from 'vant';
import { registerApi } from '@/api/api';
import { ref } from 'vue';
import router from '@/router';

let username = ref('')
let password = ref('')

const onSubmit = () => {
    console.log(username.value, password.value);
    registerApi(username.value, password.value).then(res => {
        if (res.data.code == 0) {
            showSuccessToast('注册成功');
            router.push('/index')
        }
        else {
            showFailToast('注册失败');
        }
    })

}

let phone = ref('')
let yzm = ref('')
let time
let djs = ref(10)
let parent = /^1[0-9]\d{9}$/

const queryyzm = () => {
    yzm.value = Math.floor(Math.random() * 1000000)
    djs--
    time = setInterval(() => {
        let queryyzm = document.querySelector('.queryyzm')
        // queryyzm.innerHTML = djs.value + '倒计时'
        if (parent.value==0) {
            clearInterval(time)
            queryyzm.innerHTML='重新输入'
            djs.value=5
        }
    }, 1000);

}

</script>

<style lang="scss" scoped></style>